<template>
    <div class="login-log-container">
        <!-- 表单搜索项 -->
        <el-form :model="params">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="产品物料编码">
                        <el-input v-model="params.materialProductCode" placeholder="请输入产品物料编码" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="产品物料名称">
                        <el-input v-model="params.productName" placeholder="请输入产品物料名称" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="批次号">
                        <el-input v-model="params.batchNumber" placeholder="请输入批次号" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
                    <el-button type="primary" plain :icon="Refresh" @click="handleReset">重置</el-button>
                </el-col>
            </el-row>
        </el-form>

        <!-- 按钮组 -->
        <el-row class="button-group">
            <el-col :span="10">
                <el-button type="primary" :icon="Plus" plain @click="openInsert">新增</el-button>
                <el-button type="danger" plain :disabled="deleteDisabled" :icon="Delete" @click="handleDelete">删除</el-button>
                <el-button type="danger" plain @click="clearAll">清空</el-button>
            </el-col>
            <el-col :span="14">
                <div class="button-right">
                    <el-tooltip content="隐藏搜索" placement="top">
                        <el-button :icon="Search" circle @click="toggleSearchVisibility" />
                    </el-tooltip>
                    <el-tooltip content="刷新" placement="top">
                        <el-button :icon="Refresh" circle @click="handleReset" />
                    </el-tooltip>
                </div>
            </el-col>
        </el-row>

        <!-- 数据表格 -->
        <el-row>
            <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" :selectable="selectable" width="40" />
                <el-table-column prop="snId" label="SN码" align="center" />
                <el-table-column prop="productMaterialManagement.materialProductCode" label="产品编码" align="center" />
                <el-table-column prop="productMaterialManagement.productName" label="产品名称" align="center" />
                <el-table-column prop="productMaterialManagement.specificationAndModel" label="规格型号" align="center" />
                <el-table-column prop="units.unit" label="单位" align="center" />
                <el-table-column prop="batchNumber" label="批次号" align="center" />
                <el-table-column prop="snCodeQuantity" label="SN码数量" align="center" />
            </el-table>
        </el-row>

        <!-- 分页组件 -->
        <el-row>
            <el-col :span="24">
                <div class="demo-pagination-block">
                    <el-pagination 
                        :current-page="params.currentPage"
                        :page-size="params.pageSize"
                        background
                        :page-sizes="pageSizes"
                        layout="total,sizes,prev,pager,next,jumper"
                        :total="pageResult.total"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>

        <!-- 添加编辑对话框 -->
        <el-dialog v-model="dialogFormVisible" :title="title" width="700" @close="closeDialog">
            <el-form :model="form">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="产品编码" :label-width="formLabelWidth">
                            <el-input v-model="form.materialCode" autocomplete="off" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="批次号" :label-width="formLabelWidth">
                            <el-input v-model="form.batchNumber" autocomplete="off" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="SN码数量" :label-width="formLabelWidth">
                            <el-input v-model="form.snCodeQuantity" type="number" autocomplete="off" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="closeDialog">取消</el-button>
                    <el-button type="primary" @click="confirmAdd">确认</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { getSnTbaleList, deleteSnTbale, insertsn } from '@/apis/zs/index';
import { onMounted, ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Search, Refresh, Delete, Plus } from '@element-plus/icons-vue';

// 响应式变量
const dialogFormVisible = ref(false);
const title = ref('新增设备类型');
const planNo = ref([]);
const tableData = ref([]);
const pageResult = ref({});
const deleteDisabled = ref(true);
const formLabelWidth = '120px'; // 添加 label-width

const form = reactive({
    materialProductCode: '',
    batchNumber: '',
    snCodeQuantity: ''
});

// 搜索参数
const params = ref({
    currentPage: 1,
    pageSize: 10,
    materialProductCode: '',
    productName: '', // 确保这个字段存在，以便能够搜索
    batchNumber: ''
});

// 分页大小
const pageSizes = [2, 5, 10, 20];

// 页面加载时获取数据
onMounted(async () => {
    await loadData();
});

// 获取数据函数
const loadData = async () => {
    pageResult.value = await getSnTbaleList(params.value);
    tableData.value = pageResult.value.records;
};

// 处理搜索
const handleSearch = async () => {
    await loadData();
};

// 重置搜索参数
const handleReset = async () => {
    Object.assign(params.value, {
        currentPage: 1,
        pageSize: 10,
        materialProductCode: '',
        productName: '',
        batchNumber: ''
    });
    await loadData();
};

// 分页大小变化
const handleSizeChange = async (size) => {
    params.value.pageSize = size;
    await loadData();
};

// 当前页变化
const handleCurrentChange = async (currentPage) => {
    params.value.currentPage = currentPage;
    await loadData();
};

// 选中行变化
const handleSelectionChange = (val) => {
    deleteDisabled.value = !val.length;
    planNo.value = val.map(item => item.snId); // 使用snId作为唯一标识
};

// 删除选中行
const handleDelete = () => {
    if (planNo.value.length === 0) {
        ElMessage.warning('请先选择要删除的项');
        return;
    }
    
    ElMessageBox.confirm('是否确认删除这些数据项？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        await deleteSnTbale(planNo.value);
        await loadData(); // 刷新数据
        ElMessage({ type: 'success', message: '删除成功' });
    }).catch(() => {
        ElMessage({ type: 'info', message: '已取消删除' });
    });
};

// 确认新增
const confirmAdd = async () => {
    await insertsn(form);
    ElMessage.success('新增成功');
    dialogFormVisible.value = false;
    await loadData();
};

// 打开新增对话框
const openInsert = () => {
    dialogFormVisible.value = true;
};

// 关闭对话框
const closeDialog = () => {
    dialogFormVisible.value = false;
    resetForm();
};

// 重置表单数据
const resetForm = () => {
    form.materialCode = '';
    form.batchNumber = '';
    form.snCodeQuantity = '';
};

// 控制搜索框的显示与隐藏
const toggleSearchVisibility = () => {
    // 这里添加你的实现逻辑，例如控制一个变量来显示或隐藏搜索框
};
</script>

<style scoped>
.button-right {
    text-align: right;
}

.button-group {
    margin-top: 20px;
    margin-bottom: 10px;
}

.demo-pagination-block .el-pagination {
    justify-content: end;
    margin-top: 20px;
}
</style>
